<template>
  <div class="boxs">
    <div class="f2" v-loading="loading">
      <ul class="ul">
        <li style="position: relative">
          <el-form :model="form" label-width="150px" :rules="rules">
            <el-form-item label="用款金额" prop="a">
              <el-input
                placeholder="请输入用款金额"
                v-model="addform.a"
                @focus="
                  () => {
                    this.addform.a = remoney(this.addform.a);
                  }
                "
                @input="limitInput($event, 'a')"
                @blur="a"
              ></el-input>
              <p
                style="
                  position: absolute;
                  right: 0.0781rem;
                  top: 0px;
                  z-index: 99;
                  font-size: 0.0833rem;
                "
              >
                元
              </p>
              <p class="message" v-if="a1">格式错误，请重新输入</p>
            </el-form-item>
            <el-form-item label="用款期限" prop="b">
              <el-input
                placeholder="请输入用款期限"
                v-model="form.b"
                @blur="submitBtns"
              ></el-input>
              <p
                style="
                  position: absolute;
                  right: 0.0781rem;
                  top: 0px;
                  z-index: 99;
                  font-size: 0.0833rem;
                "
              >
                月
              </p>
            </el-form-item>
            <!-- <el-form :model="form" label-width="150px" :rules="rules">
              <el-form-item label="还款方式" prop="d">
                <el-select
                  v-model="form.d"
                  placeholder="请选择还款方式"
                  @change="submitBtns"
                >
                  <el-option label="等额本金" value="等额本金"></el-option>
                  <el-option label="等额本息" value="等额本息"></el-option>
                  <el-option label="后息后本" value="后息后本"></el-option>
                </el-select>
              </el-form-item>
            </el-form> -->
          </el-form>
        </li>
      </ul>
      <div class="submit">
        <button
          class="btn btn3"
          v-bind:class="{ active: btn, actives: submitMessage == '提交中' }"
          @click="goNextFlow()"
        >
          {{ submitMessage }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { Addbusapplyputouts } from "@/utils";
import { mapState } from "vuex";
export default {
  data() {
    return {
      submitMessage: "提交",
      loading: false,
      isLock: false,
      btn: false, //提交按钮是否可用状态变量
      a1: false,
      id: "", //id
      productcode: "", //产品码
      form: {
        a: "",
        b: "",

        d: "",
      },
      // 用户填写资料表格
      addform: {
        a: "",
        b: "",
        d: "",
      },
      // 表单验证
      rules: {
        a: [{ required: true, message: " ", trigger: "blur" }],
        b: [{ required: true, message: " ", trigger: "blur" }],
        d: [{ required: true, message: " ", trigger: "change" }],
      },
    };
  },
  // 计算属性
  computed: {
    ...mapState(["shangLianApplyParameter"]),
  },
  // 生命周期方法
  mounted() {
    this.id = this.shangLianApplyParameter.applyid;
    this.productcode = localStorage.getItem("productcode");
  },
  methods: {
    // 表单
    a(e) {
      this.a1 = false;
      this.form.a = this.addform.a;
      //获取输入的数据，若不写这行，数据可能输不进去
      this.addform.a = e.target.value;
      //将用户输入的数据，自动转换为带千分符的
      this.addform.a = this.fmoney(this.addform.a);
      let value = Number(this.form.a);
      this.submitBtns();
      if (this.form.a == "") return;
      this.form.a = value.toFixed(2);
      if (isNaN(this.form.a)) {
        this.form.a = "";
        this.a1 = true;
      }
    },
    // 提交
    async goNextFlow() {
      if (this.submitMessage == "提交中") return;
      if (!this.btn) return;
      this.submitMessage = "提交中";
      let params = {
        applyid: this.id,
        productcode: this.productcode,
        businesssum: this.form.a,
        termmonth: this.form.b,
        corpuspaymethod: this.form.d,
      };
      let data = await Addbusapplyputouts(params);
      if (data.code == 100) {
        this.$Message.success("申请提交成功");
        this.$router.push("/sjghdApplication4");
          setTimeout(() => {
            this.submitMessage = "提交";
          }, 3000);
        return;
      } else if ((data.code = 101)) {
        this.$Message.error("可用授信额度不足");
        this.submitMessage = "提交";
        return;
      } else {
        this.submitMessage = "提交";
      }
    },

    submitBtns() {
      if (this.form.a != "" && this.form.b != "") {
        this.btn = true;
      } else {
        this.btn = false;
      }
    },
    // 表单格式转换
    // 票面金额
    limitInput(value, name) {
      this.addform[name] =
        ("" + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || "";
    },
    //千分位格式化：10000转为10,000.00
    fmoney(s, n) {
      if (s == "" || s == null || (s == undefined) | isNaN(Number(s))) {
        return s;
      }
      s = Number(s) ? Number(s) : s;
      n = (n || n == 0) && n > -1 && n <= 20 ? n : 2;
      s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
      var l = s.split(".")[0].split("").reverse();
      var r = s.split(".")[1];
      var t = "";
      for (var i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? "," : "");
      }
      if (n > 0) {
        r = "." + r;
      } else if (n == 0) {
        r = "";
      }
      let returnT = t.split("").reverse().join("") + r;
      //负数处理
      if (returnT[0] == "-" && returnT[1] == ",") {
        returnT = "-" + returnT.substring(2);
      }
      return returnT;
    },
    //千分位反格式化:10,000.00转为10000.00
    remoney(s) {
      let str = "";
      if (s) {
        str = String(s).replace(/,/g, "");
      }
      if (s && (s + "").indexOf(".") > -1 && Number(str)) {
        return String(s).replace(/[^\d\.-]/g, "");
      } else if (s && Number(str)) {
        return str;
      } else {
        return s;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.boxs {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  .f2 {
    overflow: auto;
    width: 100%;
    ul {
      display: flex;
      flex-direction: column;
      justify-content: center;
      li {
        width: 90%;
        margin-bottom: 0.0938rem;
        // height: 0.2604rem;
        display: flex;
        justify-content: center;
        .message {
          margin-top: -0.0573rem;
          font-size: 0.0625rem;
          font-family: Source Han Sans SC;
          font-weight: 300;
        }
      }
    }
    .remark {
      display: flex;
      justify-content: center;
      margin-left: -5px;
      @media only screen and (min-width: 1580px) and (max-width: 1950px) {
        margin-left: -33px;
      }
    }
  }
  .f3 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0.2865rem;

    width: 1.4323rem;
    height: 0.1771rem;
    background: #3f6ef2;
    border-radius: 0.0208rem;
    font-size: 0.0938rem;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
  }
  // 按钮组
  .submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 0.2604rem;
    margin: 0.026rem 0 0.026rem 0;

    .btn {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 0.9375rem;
      height: 0.1771rem;
      background: #3f6ef2;
      border-radius: 0.0208rem;
      font-size: 0.0938rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #ffffff;
      margin-right: 0.1563rem;
    }
    .btn1 {
      background-color: #bfbfbf;
    }
    // 提交按钮
    .btn3 {
      background-color: #ccc;
      &.active {
        background-color: #3f6ef2;
      }
      &.actives {
        background-color: rgba(10, 123, 224, 0.6);
      }
    }
  }
}
/* 输入框样式  */
::v-deep .el-input__inner {
  box-sizing: border-box;
  width: 1.5625rem;
  height: 0.2031rem;
  font-size: 0.0781rem;
  border: 1px solid #e0e0e0;
  border-radius: 0rem;
  padding: 0.0521rem;
  color: #606266;
  outline: 0;
}
::v-deep .el-dialog__header {
  padding: 0;
}
::v-deep .el-form-item__label {
  font-size: 0.0729rem;
}
::v-deep .el-form-item {
  margin-bottom: 0.1042rem;
}
</style>
<style lang="scss">
.el-textarea__inner {
  border-radius: 0rem;
  font-size: 0.0729rem;
  font-weight: 500;
  font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB",
    \\5B8B体, sans-serif;
}
</style>
